<template>
    <div 
      class="p-5 rounded-xl transition-all duration-300 hover:scale-[1.02]"
      :class="`bg-${color}-50 hover:shadow-lg`"
    >
      <div class="flex items-start">
        <div 
          class="p-3 rounded-lg mr-4"
          :class="`bg-${color}-100 text-${color}-600`"
        >
          <i :class="`fas fa-${icon} text-xl`"></i>
        </div>
        <div>
          <h3 class="font-semibold text-lg">{{ title }}</h3>
          <p class="text-gray-600 text-sm mt-1">{{ description }}</p>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'FeatureCard',
    props: {
      title: {
        type: String,
        required: true
      },
      icon: {
        type: String,
        required: true
      },
      color: {
        type: String,
        default: 'blue'
      },
      description: {
        type: String,
        required: true
      }
    }
  }
  </script>